<template>
  <Card v-if="viewLoading" :dis-hover="true" :title="$route.meta.title">
    <Tabs :value="field" @on-click="onClickTabs">
      <TabPane v-for="(v, k) in constants['user_wallet_record_fields_name']" :label="v" :name="k.toString()" :key="k">
        <Table v-if='field===k.toString()' :columns="tableColumns" :data="tablePager.items" :loading="tableLoading" />

        <Page :current="tablePager.current" :total="tablePager.total_items" :page-size="tablePager.limit" show-total @on-change="onChangePage"></Page>
      </TabPane>
    </Tabs>
  </Card>
</template>

<script>
  import { mapState } from 'vuex';
  import { Card, Page, Message, Table, Tabs } from 'iview';
  import userWalletRecord from '@/api/user/wallet/record';

  export default {
    components: {
      [Card.name]: Card,
      [Page.name]: Page,
      [Table.name]: Table,
      [Tabs.name]: Tabs,
      [Tabs.Pane.name]: Tabs.Pane
    },
    data() {
      return {
        viewLoading: false,
        field: '1',
        tableLoading: false,
        tablePager: {
          current: 1,
          limit: 10
        },
        tableColumns: [
          {title: 'ID', align: 'center', render: (h, params) => { return h('span', params.row.user_wallet_record.id); }},
          {title: '账号', align: 'center', render: (h, params) => { return h('span', params.row.from_user.account); }},
          {title: '类型', align: 'center', render: (h, params) => {
            return h('span', this.constants['user_wallet_record_type'][params.row.user_wallet_record.type]);
          }},
          {title: '数量', align: 'center', render: (h, params) => {
            return h('span', String.fromCharCode(params.row.user_wallet_record.action)+' '+params.row.user_wallet_record.amount);
          }},
          {title: '旧数量', align: 'center', render: (h, params) => { return h('span', params.row.user_wallet_record.amount_old); }},
          {title: '新数量', align: 'center', render: (h, params) => { return h('span', params.row.user_wallet_record.amount_new); }}
        ]
      };
    },
    methods: {
      onChangePage(current) {
        this.tablePager.current = current;
        this.getData();
      },
      onClickTabs(value) {
        this.field = value;
        this.tablePager.current = 1;
        this.tablePager.limit = 10;
        this.getData();
      },
      getData() {
        this.tableLoading = true;

        userWalletRecord.pagerByField(this.field, this.tablePager.limit, this.tablePager.current).then((data) => {
          this.tablePager = data.pager;
          this.tableLoading = false;
        });
      }
    },
    mounted() {
      this.getData();
    },
    computed: mapState({
      constants: state => state.constants.constants
    }),
    created() {
      this.$store.dispatch('constants/find').then((res) => {
        this.viewLoading = true;
        if(res.code != 0) {
          Message.error(res.msg);
          return false;
        }
      }).catch((err) => {
        console.log(err);
        this.viewLoading = true;
      });
    }
  }
</script>